<script type="text/javascript" src="${ctxPath}/js/pages/template_add.js"></script>
<link rel="stylesheet" href="${ctxPath}/css/pages/template_add.css">
<div class="pageheader">
    <h2><i class="fa fa-pencil"></i> 模板管理 <span>新增模板.</span></h2>

    <div class="breadcrumb-wrapper">
        <span class="label">当前位置:</span>
        <ol class="breadcrumb">
            <li><a href="index.html">Bracket</a></li>
            <li><a href="general-forms.html">模板管理</a></li>
            <li class="active">新增模板</li>
        </ol>
    </div>
</div>

<div class="contentpanel">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-btns">
                <a href="" class="panel-close">&times;</a>
                <a href="" class="minimize">&minus;</a>
            </div>
            <h4 class="panel-title">新增网页模板</h4>

            <p>
                新增网页模板，上传模板压缩包，支持.rar,.zip的压缩文件，压缩包的文件存放格式是：将html页面单独放在最外面无需文件夹包裹，内置images,js,css，fonts等文件夹，这样以便发布模板</p>
        </div>
        <form id="templateAddForm" method="post" class="form-horizontal" action="./template_add_form.action" enctype="application/x-www-form-urlencoded">
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-2 control-label">模板名称 <span class="asterisk">*</span></label>

                    <div class="col-sm-10">
                        <input type="text" name="tamplateName" class="form-control"
                               placeholder="请输入模板的名称，不能为空"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">模板标签 <span class="asterisk">*</span></label>

                    <div class="col-sm-10">
                        <input type="text" name="tamplateTips" class="form-control" placeholder="多个标签以，隔开"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">模板描述 <span class="asterisk">*</span></label>

                    <div class="col-sm-10">
                                <textarea rows="5" class="form-control" name="tamplateDescribe" placeholder="模板描述"
                                          style="resize:none;"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">模板截图 <span class="asterisk">*</span></label>
                    <input type="hidden" name="uploadImg" id="uploadImg">
                    <div id="uploadTemplateResourcePrepare" class="col-sm-10">
                        <div class="form-control colin-upload-snapshot">
                            <div id="templateSnapshotArea">
                                <div id="templateSnapshotBtn" class="text-center" name="templateSnapshot">上传模板截图</div>
                                <p class="text-center">或将图片文件拖至此处，最多添加4张图片</p>
                            </div>
                        </div>
                    </div>
                    <div id="uploadTemplateResourceReady" class="col-sm-10 hidden">
                        <div class="form-control colin-upload-snapshot_append">
                            <div id="templateSnapshotUploadThum">

                            </div>
                            <div id="templateSnapshotUploadForm">
                              <ul class="list-inline">
                                  <li class="col-sm-7">
                                      <div class="progress">
                                          <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                              0%
                                          </div>
                                      </div>
                                  </li>
                                  <li class="col-sm-5">
                                      <div id="resumeAddSnapshotBtn"></div>
                                      <button id="startUploadSnapshotBtn" type="button" class="btn btn-success">开始上传</button>
                                      <button id="resetUploadSnapshotBtn" type="button" class="btn btn-danger">重新选择</button>
                                  </li>
                              </ul>
                            </div>
                        </div>
                    </div>
                    <div id="templateResourceUploadSuccess" class="col-sm-10 hidden">
                        <div class="form-control">

                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">模板资源 <span class="asterisk">*</span></label>

                    <input type="hidden" id="uploadZipLocation" name="uploadZipLocation"/>
                    <input type="hidden" id="uploadZip" name="uploadZip"/>
                    <div id="uploadZipResourcePrepare" class="col-sm-10">
                        <div class="form-control">
                            <div id="templateZipResource" class="text-center">请选择上传的压缩资源</div>
                        </div>
                    </div>
                    <div id="uploadZipResourceReady" class="col-sm-10 hidden">
                        <div class="form-control">
                            <div id="templateResourceUpload">
                                <ul class="list-inline">
                                    <li class="col-sm-9">
                                        <div id="uploadZipResourceReadyFileInfo"></div>
                                    </li>
                                    <li class="col-sm-3">
                                        <div class="text-right">
                                            <button type="button" class="btn btn-success">开始上传</button>
                                            <button type="button" class="btn btn-danger">重新选择</button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div id="templateResourceUploadProgress">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        0%
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="uploadZipResourceCompleted" class="col-sm-10 hidden">
                        <div class="form-control">
                            <div id="templateResourceUploadCompleted">
                                <ul class="list-inline">
                                    <li class="col-sm-8">

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- panel-body -->
            <div class="panel-footer">
                <div class="row">
                    <div class="col-md-6 col-md-offset-4 text-center">
                        <button id="submitTemplateBtn" type="submit" class="btn btn-primary col-sm-5 ">提交</button>
                        <button id="resetTemplateBtn" type="reset" class="btn btn-danger col-sm-5 col-sm-offset-1">重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- panel -->
</div><!-- contentpanel -->
<!--新增模板提示框-->
<div id="add_template_modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增模板提示框</h4>
            </div>
            <div class="modal-body">
                <p id="add_template_result"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div><!-- /.modal -->
